<template>
   <div class="detail top-page" ref="detailRef">
   <tabControl
   v-if="showTabControl"
   :titles="['a']"
    />

    <van-nav-bar
      title="房屋详情"
      left-text="旅途"
      left-arrow
      @click-left="onClickLeft"
    />
    <div v-if="mainPart">
        <detail-swipper :swipperdata="mainPart.topModule.housePicture.housePics"/>
        <detail_02Infos :top-infos="mainPart.topModule"></detail_02Infos>
        <detail_03Facility :houseFacility="mainPart.dynamicModule.facilityModule.houseFacility"></detail_03Facility>
    </div>
  </div>
</template>

<script setup>
import DetailSwipper from './childComponents/DetailSwipper.vue';
import detail_02Infos from './childComponents/detail_02-infos.vue';
import detail_03Facility from './childComponents/detail_03-facility.vue';
import tabControl from '@/components/tabControl/tab-control.vue';
import {computed, reactive, ref} from 'vue'
import { useRoute,useRouter } from 'vue-router';
import getDetailsRequest from '@/service/modules/detail'
const router=useRouter()
const route=useRoute()


const detailInfos=ref({})
const mainPart=computed(()=>detailInfos.value.mainPart)
// 请求网络数据
const houseId=route.params.id
getDetailsRequest(houseId).then(res=>{
    detailInfos.value=res.data
    
})

const showTabControl=ref(true)

// function tabClick(){
  
// }
// 返回上一级
function onClickLeft(){
    router.back()
}



</script>



<style lang="less" scoped>
.tabs {
  position: fixed;
  z-index: 9;
  left: 0;
  right: 0;
  top: 0;
}

.footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 120px;

  img {
    width: 123px;
  }

  .text {
    margin-top: 12px;
    font-size: 12px;
    color: #7688a7;
  }
}
</style>
